<template>
  <div style="width: 100%; margin-left: 10px">
    <titleNav info="设备列表"></titleNav>

    <div style="display: flex; margin-top: 8px">
      设备名称：
      <el-input
        v-model="deviceName"
        style="width: 35%"
        placeholder="请输入设备名称"
      ></el-input>
      &nbsp;
      <el-button @click="search">搜索</el-button>
      <el-button @click="reset">重置</el-button>
    </div>
    <div style="margin-top: 8px">
      <button @click="showModal = true" class="btn">添加新设备</button>
    </div>
    <el-table :data="filteredData" height="600" border style="width: 100%">
      <el-table-column prop="id" label="设备编号" width="350"></el-table-column>
      <el-table-column
        prop="name"
        label="设备名称"
        width="350"
      ></el-table-column>
      <el-table-column
        prop="number"
        label="设备数量"
        width="350"
      ></el-table-column>
      <el-table-column
        prop="user"
        label="用户名称"
        width="350"
      ></el-table-column>
    </el-table>
    <div class="box" v-cloak>
      <div>
        <div class="mask" v-if="showModal" @click="showModal = false"></div>
        <div class="pop" v-if="showModal">
          <div style="margin-left: 28%">
            <div style="margin-top: 20px">设备编号:</div>
            <el-input
              v-model="inid"
              style="width: 70%"
              placeholder="请输入设备编号"
            ></el-input>
          </div>

          <div style="margin-left: 28%">
            <div style="margin-top: 20px">设备名称:</div>
            <el-input
              v-model="inname"
              style="width: 70%"
              placeholder="请输入设备名称"
            ></el-input>
          </div>

          <div style="margin-left: 28%">
            <div style="margin-top: 20px">设备数量</div>
            <el-input
              v-model="innumber"
              style="width: 70%"
              placeholder="请输入设备数量"
            ></el-input>
          </div>

          <div style="margin-left: 28%">
            <div style="margin-top: 20px">用户名称</div>
            <el-input
              v-model="inuser"
              style="width: 70%"
              placeholder="请输入用户名称"
            ></el-input>
          </div>
          <div style="margin-left: 35%; margin-top: 5%">
            <el-button @click="showModal = false">取消</el-button>
            <el-button @click="addDevice">添加</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showModal: false,
      inname: '',
      innumber: '',
      inuser: '',
      inid: '',
      deviceName: '',
      tableData: [
        { id: '1', name: '1', number: '99', user: '王华' },
        { id: '2', name: '2', number: '99', user: '王华' },
        { id: '3', name: '3', number: '99', user: '王华' },
        { id: '4', name: '4', number: '99', user: '王华' },
        { id: '5', name: '5', number: '99', user: '王华' },
        { id: '6', name: '6', number: '99', user: '王华' },
        { id: '7', name: '7', number: '99', user: '王华' },
        { id: '8', name: '8', number: '99', user: '王华' },
        { id: '9', name: '9', number: '99', user: '王华' },
        { id: '10', name: '10', number: '99', user: '王华' }
      ],
      filteredData: []
    }
  },
  methods: {
    search() {
      this.filteredData = this.tableData.filter((item) =>
        item.name.includes(this.deviceName)
      )
    },
    reset() {
      this.deviceName = ''
      this.filteredData = this.tableData
    },
    addDevice() {
      if (!this.inid || !this.inname || !this.innumber || !this.inuser) {
        alert('请填写所有字段！')
        return
      }
      this.tableData.push({
        id: this.inid,
        name: this.inname,
        number: this.innumber,
        user: this.inuser
      })
      this.showModal = false
      this.resetInputs()
    },
    resetInputs() {
      this.inid = ''
      this.inname = ''
      this.innumber = ''
      this.inuser = ''
    }
  },
  mounted() {
    this.filteredData = this.tableData
  }
}
</script>
<style>
[v-cloak] {
  display: none;
}
.box {
  margin-left: 10px;
  flex-direction: column;
}
.mask {
  background-color: rgb(233, 16, 16);
  opacity: 0;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.pop {
  position: fixed;
  background-color: #edf0f3;
  width: 520px;
  height: 400px;
  display: flex;
  left: 38%;
  top: 20%;
  bottom: 0;
  z-index: 90;
  margin-left: -20px;
  box-shadow: -20px 0 20px 0 rgb(0 0 0 / 10%);
  flex-direction: column;
  color: #0a0a0a;
}

.btn {
  border-radius: 4px;
  border: 1px solid blue;
  padding: 4px 12px;
}
</style>
